<template>
    <div id="parallelchart">
        <div id="parallel"></div>
        <div id="parallelData">
            <el-table :data="parallelData" height="250" style="width: 100%;">
              <el-table-column type="index" label="#"></el-table-column>
              <el-table-column prop="点赞" label="点赞"></el-table-column>
              <el-table-column prop="转发" label="转发"></el-table-column>
              <el-table-column prop="评论" label="评论"></el-table-column>
              <el-table-column prop="媒体个数" label="媒体个数"></el-table-column>
              <el-table-column prop="category" label="种类"></el-table-column>
      </el-table>
        </div>
    </div>
</template>
<script>
import * as d3 from 'd3'
import {ParallelChart} from './ParallelChart'
export default {
  data () {
    return {
      parallelData: [],
      dimensions: [],
      parallelChart: ''
    }
  },
  created () {
    this.setData()
    this.parallelChart = new ParallelChart('parallel')
    this.parallelChart.data = this.parallelData
    this.parallelChart.dimensions = this.dimensions
  },
  mounted () {
    this.parallelChart.draw()
  },
  methods: {
    setData () {
      let color = d3.scaleOrdinal(d3.schemeCategory10)
      let cates = ['cate-1', 'cate-2', 'cate-3', 'cate-4']
      this.dimensions = ['转发', '评论', '点赞', '媒体个数']
      let num = Math.random() * 100 + 20
      for (let i = 0; i < num; ++i) {
        let cateIndex = parseInt(Math.random() * cates.length)
        let json = {
          转发: parseInt(Math.random() * 100),
          评论: parseInt(Math.random() * 100),
          点赞: parseInt(Math.random() * 100),
          媒体个数: parseInt(Math.random() * 20),
          category: cates[cateIndex],
          color: color(cateIndex)
        }
        this.parallelData.push(json)
      }
    }
  }
}
</script>
<style scoped>
#parallelchart {
    height: 100%;
    width: 100%;
}
#parallel {
    height: 70%;
    width: 100%;
}
#parallelData {
    height: 30%;
    width: 100%;
}
</style>
